🎨 CSS Cơ Bản - Lộ trình học từ A-Z

Học CSS từ những khái niệm cơ bản đến nâng cao với bài tập thực hành

📚 Bạn sẽ học được gì?

🗺️ Lộ trình học CSS (10 bài)

1

CSS Cơ bản & Cách sử dụng

Giới thiệu CSS, cú pháp, cách thêm CSS vào HTML

2

Selectors & Specificity

Các loại selector, độ ưu tiên, combinators

3

Colors & Backgrounds

Màu sắc, background, gradients, opacity

4

Typography & Text

Fonts, text styling, line-height, spacing

5

Box Model

Width, height, padding, margin, border

6

Display & Position

Display types, positioning, z-index, float

7

Flexbox

Layout linh hoạt với Flexbox

8

CSS Grid

Layout 2D với Grid System

9

Responsive Design

Media queries, mobile-first design

10

Transitions & Animations

Hiệu ứng chuyển động và animation

📖 Các bài học

1

CSS Cơ bản & Cách sử dụng

Dễ

Tìm hiểu CSS là gì, cú pháp cơ bản, và 3 cách thêm CSS vào HTML.

  • CSS là gì?
  • Inline CSS
  • Internal CSS
  • External CSS
  • Comments trong CSS
Học ngay →
2

Selectors & Specificity

Dễ

Học cách chọn phần tử HTML với các loại selector khác nhau.

  • Element Selector
  • Class & ID Selector
  • Attribute Selector
  • Pseudo-classes
  • Combinators
Học ngay →
3

Colors & Backgrounds

Dễ

Làm việc với màu sắc, background, và hiệu ứng gradient.

  • Color values (hex, rgb, hsl)
  • Background color & image
  • Gradients
  • Opacity & transparency
Học ngay →
4

Typography & Text

Dễ

Styling text: fonts, sizes, spacing, và text properties.

  • Font family & size
  • Font weight & style
  • Text align & decoration
  • Line height & spacing
  • Google Fonts
Học ngay →
5

Box Model

Trung bình

Hiểu rõ Box Model: content, padding, border, margin.

  • Width & Height
  • Padding
  • Border
  • Margin
  • Box-sizing
Học ngay →
6

Display & Position

Trung bình

Điều khiển layout với display và position properties.

  • Display (block, inline, none)
  • Position (static, relative, absolute)
  • Fixed & Sticky
  • Z-index
  • Float & Clear
Học ngay →
7

Flexbox Layout

Trung bình

Tạo layout linh hoạt với Flexbox container và items.

  • Flex container
  • Flex direction & wrap
  • Justify & align content
  • Flex grow, shrink, basis
  • Flexbox playground
Học ngay →
8

CSS Grid Layout

Trung bình

Layout 2D mạnh mẽ với CSS Grid System.

  • Grid container & items
  • Grid template rows/columns
  • Grid gap
  • Grid areas
  • Grid auto-flow
Học ngay →
9

Responsive Design

Trung bình

Tạo website responsive với Media Queries.

  • Viewport & Meta tag
  • Media queries
  • Breakpoints
  • Mobile-first design
  • Responsive images
Học ngay →
10

Transitions & Animations

Nâng cao

Thêm chuyển động và animations vào website.

  • Transitions
  • Transform (rotate, scale, translate)
  • Keyframe animations
  • Animation properties
  • Hover effects
Học ngay →